import 'package:ele_progress/ele_progress.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:matuo/utils/DIYColors.dart';
import 'package:matuo/utils/Utils.dart';

import '../../generated/l10n.dart';
import '../../utils/TimeUtils.dart';

class HealthPage extends StatefulWidget {
  const HealthPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _HealtPageState();
  }
}

class _HealtPageState extends State<HealthPage> {
  @override
  void initState() {
    super.initState();
  }

  var standProgress = 50;
  var motionProgress = 90;
  var depleteProgress = 100;
  var stepProgress = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBodyBehindAppBar: true,
        backgroundColor: Colors.transparent,
        body: /*通过NotificationListener来阻止SingleChildScrollView的滑动事件在向上传递*/
            NotificationListener<ScrollNotification>(
                onNotification: (ScrollNotification notification) {
                  // 返回true来阻止事件向上传递
                  return true;
                },
                child: SafeArea(
                    child: SingleChildScrollView(
                        child: Column(children: [
                  _clover(),
                  _step(),
                  _sleep(),
                  _heartRate(),
                  _bloodPressure(),
                  _bloodOxygen(),
                  _bloodSugar(),
                  _bloodLipids(),
                  _uricAcid(),
                  _weight(),
                  SizedBox(
                    height: 20.h,
                  )
                ])))));
  }

  //三叶草
  GestureDetector _clover() {
    return GestureDetector(
        child: Container(
            margin: _margin(),
            padding: _padding(),
            decoration: Utils.instance.decorationImage("clover", 15.r),
            width: double.infinity,
            height: 290.h,
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Row(mainAxisAlignment: MainAxisAlignment.start, children: [
                Text(
                  TimeUtils.intlDate(),
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 15.sp),
                ),
                const Expanded(child: SizedBox()),
                Image.asset(Utils.instance.getImagePathPNG("icon_explain"),
                    width: 26.r, height: 26.r)
              ]),
              SizedBox(height: 20.h),
              Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _box(15),
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          _cloverRow("icon_stand", S.of(context).stand, "${8}",
                              "${8}${S.of(context).h}"),
                          SizedBox(height: 24.h),
                          _cloverRow("icon_motion", S.of(context).motion,
                              "11:05", "03:50")
                        ]),
                    const Expanded(child: SizedBox()),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            GestureDetector(
                                onTap: () {
                                  setState(() {
                                    if (standProgress >= 100) {
                                      standProgress = 0;
                                    } else {
                                      standProgress++;
                                    }
                                  });
                                },
                                child: Stack(
                                    alignment: Alignment.bottomRight,
                                    children: [
                                      Image.asset(
                                          Utils.instance.getImagePathPNG(
                                              "icon_stand_light_bg"),
                                          width: 60.w,
                                          height: 60.h),
                                      Image.asset(
                                          Utils.instance.getImagePathPNG(
                                              "icon_stand_dark_bg"),
                                          width: (0.6 * standProgress).w,
                                          height: (0.6 * standProgress).h)
                                    ])),
                            _box(4),
                            GestureDetector(
                                onTap: () {
                                  setState(() {
                                    if (standProgress >= 100) {
                                      depleteProgress = 0;
                                    } else {
                                      depleteProgress++;
                                    }
                                  });
                                },
                                child: Stack(
                                    alignment: Alignment.bottomLeft,
                                    children: [
                                      Image.asset(
                                          Utils.instance.getImagePathPNG(
                                              "icon_consumption_light_bg"),
                                          width: 60.w,
                                          height: 60.h),
                                      Image.asset(
                                          Utils.instance.getImagePathPNG(
                                              "icon_consumption_dark_bg"),
                                          width: (0.6 * depleteProgress).w,
                                          height: (0.6 * depleteProgress).h)
                                    ]))
                          ],
                        ),
                        SizedBox(height: 4.h),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            GestureDetector(
                                onTap: () {
                                  setState(() {
                                    if (motionProgress >= 100) {
                                      motionProgress = 0;
                                    } else {
                                      motionProgress++;
                                    }
                                  });
                                },
                                child: Stack(
                                    alignment: Alignment.topRight,
                                    children: [
                                      Image.asset(
                                          Utils.instance.getImagePathPNG(
                                              "icon_exercise_light_bg"),
                                          width: 60.w,
                                          height: 60.h),
                                      Image.asset(
                                          Utils.instance.getImagePathPNG(
                                              "icon_exercise_dark_bg"),
                                          width: (0.6 * motionProgress).w,
                                          height: (0.6 * motionProgress).h)
                                    ])),
                            _box(4),
                            GestureDetector(
                                onTap: () {},
                                child: Stack(
                                    alignment: Alignment.bottomRight,
                                    children: [
                                      Image.asset(
                                          Utils.instance.getImagePathPNG(
                                              "icon_clover_feet_bg"),
                                          width: 60.w,
                                          height: 60.h)
                                    ]))
                          ],
                        )
                      ],
                    ),
                    const Expanded(child: SizedBox()),
                    _cloverRow("icon_consume", S.of(context).deplete, "${300}",
                        "${500}${S.of(context).kcal}"),
                    _box(15)
                  ]),
              SizedBox(height: 10.h),
              Container(
                  margin: EdgeInsets.only(left: 20.r, right: 20.r),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(50.r)),
                      color: DIYColors.orange_ed),
                  width: double.infinity,
                  height: 40.h,
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                            Utils.instance.getImagePathPNG("icon_health_step"),
                            width: 16.w,
                            height: 16.h),
                        _box(10),
                        Text(S.of(context).NumberSteps,
                            style: TextStyle(
                                color: DIYColors.gray_99,
                                fontSize: 14.sp,
                                fontWeight: FontWeight.w400)),
                        _box(15),
                        Text("${1000}",
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: 14.sp,
                                fontWeight: FontWeight.w400)),
                        Text("/${10000}",
                            style: TextStyle(
                                color: DIYColors.gray_99,
                                fontSize: 14.sp,
                                fontWeight: FontWeight.w400))
                      ]))
            ])),
        onTap: () {
          setState(() {
            if (standProgress >= 100 ||
                motionProgress >= 100 ||
                depleteProgress >= 100) {
              standProgress = 0;
              motionProgress = 0;
              depleteProgress = 0;
            } else {
              standProgress++;
              motionProgress++;
              depleteProgress++;
            }
          });
          //点击事件
        });
  }

  //步数
  GestureDetector _step() {
    return GestureDetector(
      child: Container(
        margin: _margin(),
        padding: _padding(),
        decoration: Utils.instance
            .decorationImage("ic_health_func_heart_rate_bg", 15.r),
        width: double.infinity,
        height: 200.h,
        child: Row(
          children: [
            Column(
              children: [
                SizedBox(height: 17.h),
                Text(
                  TimeUtils.intlDate(),
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 14.sp),
                ),
                SizedBox(height: 50.h),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Image.asset(Utils.instance.getImagePathPNG("icon_stand"),
                        width: 3.w, height: 10.h),
                    _box(5),
                    Text(S.of(context).TargetNumberSteps,
                        style: TextStyle(
                            color: Colors.black26,
                            fontWeight: FontWeight.w400,
                            fontSize: 14.sp))
                  ],
                ),
                SizedBox(height: 10.h),
                Text(
                  "${5000}${S.of(context).step}",
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 14.sp),
                ),
              ],
            ),
            _box(85),
            Stack(
              children: [
                Container(
                    height: 112.w,
                    width: 112.h,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            if (stepProgress >= 100) {
                              stepProgress = 0;
                            } else {
                              stepProgress++;
                            }
                          });
                        },
                        child: EProgress(
                          progress: stepProgress,
                          strokeWidth: 10.r,
                          showText: false,
                          type: ProgressType.dashboard,
                          backgroundColor: DIYColors.gray_f0,
                          colors: const [DIYColors.orange_2d],
                        ))),
                Positioned(
                    left: 0,
                    right: 0,
                    bottom: 26,
                    child: Text(
                      "${35020}",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: DIYColors.orange_2d,
                        fontWeight: FontWeight.bold,
                        fontSize: 18.sp,
                      ),
                    )),
                Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Image.asset(
                        Utils.instance.getImagePathPNG("icon_health_step"),
                        width: 16.w,
                        height: 16.h)),
              ],
            )
          ],
        ),
      ),
      onTap: () {},
    );
  }

  //睡眠
  GestureDetector _sleep() {
    return GestureDetector(
        child: Container(
            margin: _margin(),
            padding: _padding(),
            decoration:
                Utils.instance.decorationImage("ic_health_func_sleep_bg", 15.r),
            width: double.infinity,
            height: 100.h,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                _image("ic_health_func_sleep_icon"),
                _box(10),
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                  SizedBox(
                    height: 8.h,
                  ),
                  Text(
                    S.of(context).sleep,
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 18.sp,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 3.h,
                  ),
                  Text(TimeUtils.intlTime(),
                      style:
                          TextStyle(color: DIYColors.gray_99, fontSize: 15.sp))
                ]),
                const Expanded(child: SizedBox()),
                Text(
                  "${08}",
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 30.sp,
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  S.of(context).h,
                  style: TextStyle(
                      color: DIYColors.gray_99,
                      fontSize: 15.sp,
                      fontWeight: FontWeight.w400),
                ),
                Text(
                  "${08}",
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 30.sp,
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  S.of(context).m,
                  style: TextStyle(
                      color: DIYColors.gray_99,
                      fontSize: 15.sp,
                      fontWeight: FontWeight.w400),
                )
              ],
            )),
        onTap: () {});
  }

  //心率
  GestureDetector _heartRate() {
    return GestureDetector(
      child: Container(
          margin: _margin(),
          padding: _padding(),
          decoration: Utils.instance
              .decorationImage("ic_health_func_heart_rate_bg", 15.r),
          width: double.infinity,
          height: 100.h,
          child: _row("ic_health_func_heart_rate", S.of(context).HeartRate,
              TimeUtils.intlTime(), "${99}", S.of(context).bmp)),
      onTap: () {
        // 处理点击事件
      },
    );
  }

  //血压
  GestureDetector _bloodPressure() {
    return GestureDetector(
        child: Container(
            margin: _margin(),
            padding: _padding(),
            decoration: Utils.instance
                .decorationImage("ic_health_func_blood_pressure_bg", 15.r),
            width: double.infinity,
            height: 100.h,
            child: _row(
                "ic_health_func_blood_pressure_icon",
                S.of(context).BloodPressure,
                TimeUtils.intlTime(),
                "${120}/${80}",
                S.of(context).mmhg)),
        onTap: () {});
  }

  //血氧
  GestureDetector _bloodOxygen() {
    return GestureDetector(
        child: Container(
            margin: _margin(),
            padding: _padding(),
            decoration: Utils.instance
                .decorationImage("ic_health_func_blood_oxygen_bg", 15.r),
            width: double.infinity,
            height: 100.h,
            child: _row(
                "ic_health_func_blood_oxygen_icon",
                S.of(context).BloodOxygen,
                TimeUtils.intlTime(),
                "${99}",
                S.of(context).percentage)),
        onTap: () {
          // 处理点击事件
        });
  }

  //血糖
  GestureDetector _bloodSugar() {
    return GestureDetector(
        child: Container(
          margin: _margin(),
          padding: _padding(),
          decoration: Utils.instance
              .decorationImage("ic_health_func_blood_sugar_bg", 15.r),
          width: double.infinity,
          height: 100.h,
          child: _row("ic_health_func_blood_sugar", S.of(context).BloodSugar,
              TimeUtils.intlTime(), "${4.4}", S.of(context).mmoll),
        ),
        onTap: () {
          //处理点击事件
        });
  }

  //血脂
  GestureDetector _bloodLipids() {
    return GestureDetector(
        child: Container(
            margin: _margin(),
            padding: _padding(),
            decoration: Utils.instance
                .decorationImage("ic_health_func_blood_lipids_bg", 15.r),
            width: double.infinity,
            height: 270.h,
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Row(mainAxisAlignment: MainAxisAlignment.start, children: [
                _image("ic_health_func_blood_lipids"),
                _box(10),
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                  SizedBox(
                    height: 8.h,
                  ),
                  Text(
                    S.of(context).BloodLipids,
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 18.sp,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 3.h,
                  ),
                  Text(TimeUtils.intlTime(),
                      style:
                          TextStyle(color: DIYColors.gray_99, fontSize: 15.sp))
                ]),
                const Expanded(child: SizedBox()),
                Text(
                  S.of(context).mmoll,
                  style: TextStyle(
                      color: DIYColors.gray_99,
                      fontSize: 15.sp,
                      fontWeight: FontWeight.w400),
                )
              ]),
              SizedBox(height: 33.r),
              Row(mainAxisAlignment: MainAxisAlignment.start, children: [
                SizedBox(width: 30.r),
                Flexible(
                    flex: 1,
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "10",
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: 30.sp,
                                fontWeight: FontWeight.bold),
                          ),
                          SizedBox(height: 3.r),
                          Text(S.of(context).TotalCholesterol,
                              style: TextStyle(
                                  color: DIYColors.gray_99,
                                  fontSize: 15.sp,
                                  fontWeight: FontWeight.w400)),
                          SizedBox(height: 3.r),
                          Text(
                            "10",
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: 30.sp,
                                fontWeight: FontWeight.bold),
                          ),
                          SizedBox(height: 3.r),
                          Text(S.of(context).HighDensity,
                              style: TextStyle(
                                  color: DIYColors.gray_99,
                                  fontSize: 15.sp,
                                  fontWeight: FontWeight.w400))
                        ])),
                SizedBox(
                  width: 100.w,
                ),
                Flexible(
                    flex: 1,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "10",
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 30.sp,
                              fontWeight: FontWeight.bold),
                        ),
                        SizedBox(height: 3.r),
                        Text(S.of(context).Triglycerides,
                            style: TextStyle(
                                color: DIYColors.gray_99,
                                fontSize: 15.sp,
                                fontWeight: FontWeight.w400)),
                        SizedBox(height: 3.r),
                        Text(
                          "10",
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 30.sp,
                              fontWeight: FontWeight.bold),
                        ),
                        SizedBox(height: 3.r),
                        Text(S.of(context).LowDensity,
                            style: TextStyle(
                                color: DIYColors.gray_99,
                                fontSize: 15.sp,
                                fontWeight: FontWeight.w400))
                      ],
                    )),
                SizedBox(width: 30.r)
              ])
            ])),
        onTap: () {
          // 处理点击事件
        });
  }

  //尿酸
  GestureDetector _uricAcid() {
    return GestureDetector(
      child: Container(
        margin: _margin(),
        padding: _padding(),
        decoration:
            Utils.instance.decorationImage("ic_health_func_uric_acid_bg", 15.r),
        width: double.infinity,
        height: 100.h,
        child: _row("ic_health_func_uric_acid", S.of(context).UricAcid,
            TimeUtils.intlTime(), "${300}", S.of(context).moll),
      ),
      onTap: () {},
    );
  }

  //体重
  GestureDetector _weight() {
    return GestureDetector(
        child: Container(
          margin: _margin(),
          padding: _padding(),
          decoration:
              Utils.instance.decorationImage("ic_health_func_weight_bg", 15.r),
          width: double.infinity,
          height: 100.h,
          child: _row("ic_health_func_weight", S.of(context).weight,
              TimeUtils.intlTime(), "${70.5}", S.of(context).kg),
        ),
        onTap: () {});
  }

  //外边距
  EdgeInsets _margin() {
    return EdgeInsets.only(left: 15.r, right: 15.r, top: 10.r);
  }

  //内边距
  EdgeInsets _padding() {
    return EdgeInsets.all(18.r);
  }

  // //设置背景图片
  // BoxDecoration _decoration(imageName) {
  //   return BoxDecoration(
  //       borderRadius: BorderRadius.all(Radius.circular(15.r)),
  //       image: DecorationImage(
  //           image: AssetImage(Utils.instance.getImagePathPNG(imageName)),
  //           fit: BoxFit.cover));
  // }

  Row _row(iconImageName, name, time, value, unit) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        _image(iconImageName),
        _box(10),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 8.h,
            ),
            Text(
              name,
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 18.sp,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 3.h,
            ),
            Text(time,
                style: TextStyle(color: DIYColors.gray_99, fontSize: 15.sp))
          ],
        ),
        const Expanded(child: SizedBox()),
        Text(
          value,
          style: TextStyle(
              color: Colors.black,
              fontSize: 30.sp,
              fontWeight: FontWeight.bold),
        ),
        Text(
          unit,
          style: TextStyle(
              color: DIYColors.gray_99,
              fontSize: 15.sp,
              fontWeight: FontWeight.w400),
        )
      ],
    );
  }

  //设置左边icon
  Image _image(String iconImageName) {
    return Image.asset(Utils.instance.getImagePathPNG(iconImageName),
        width: 30.r, height: 30.r);
  }

  Row _cloverRow(imageName, name, value, target) {
    return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        SizedBox(
          height: 6.h,
        ),
        Image.asset(Utils.instance.getImagePathPNG(imageName),
            width: 3.w, height: 10.h),
      ]),
      _box(5),
      Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Text(name,
            style: TextStyle(
                color: Colors.black26,
                fontWeight: FontWeight.w400,
                fontSize: 14.0.sp)),
        Text(value,
            style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.w400,
                fontSize: 16.0.sp)),
        Text(target,
            style: TextStyle(
                color: Colors.black26,
                fontWeight: FontWeight.w400,
                fontSize: 14.0.sp))
      ])
    ]);
  }

  SizedBox _box(int width) {
    return SizedBox(
      width: width.w,
    );
  }
}
